<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>请先登录</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="icon" href="img/京东-01.png">
    <style>
        .top {
            width: 100%;
            height: 60px;
            background-color: #83cbac;
        }

        .top span {
            height: 60px;
            line-height: 60px;
            float: left;
            margin-left: 100px;
            font-size: 16px;
        }

        .top ul {
            float: right;
            width: 1000px;
            height: 60px;
            line-height: 60px;
        }

        .top li {
            float: left;
            width: 200px;
            height: 60px;
            text-align: center;
            font-size: 16px;
        }

        .top ul a {
            float: left;
            width: 200px;
            height: 60px;
        }

        .top ul a:hover li {
            background-color: #1a6840;
            color: white;
        }

        .centt {
            width: 100%;
            height: 492px;
            overflow: hidden;
            background-color: #e93854;
        }

        td:first-child {
            text-align: right;
        }

        .dibu {
            height: 85px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
            padding-top: 20px;
        }

        .censm {
            width: 800px;
            height: 492px;
            margin: 0 auto;
            background: url(https://passport.jd.com/new/misc/2015/background.png)no-repeat;
        }

        form {
            float: right;
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <div class="top">
        <span style="cursor: pointer;">京东</span>
        <ul>
            <a href="登录.html">
                <li>登录</li>
            </a>
            <a href="注册.html">
                <li>注册</li>
            </a>
            <a href="我的订单.html">
                <li>我的订单</li>
            </a>
            <a href="我的京东.html">
                <li>我的京东</li>
            </a>
            <a href="list.html">
                <li>商品列表</li>
            </a>
        </ul>
    </div>
    <div class="centt">
        <div class="censm">
            <form action="">
                <table align="center">
                    <caption>
                        <h2 style="margin-bottom: 30px;">账户登录</h2>
                    </caption>
                    <tr>
                        <td></td>
                        <td><input type="text" name="username" style="margin-bottom: 30px;height: 20px; padding: 4px;"
                                placeholder="请输入账号"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="password" name="password"
                                style="margin-bottom: 30px;height: 20px;padding: 4px;" placeholder="请输入密码"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="submit" value="登录"
                                style="width: 172px;height: 30px;background-color: #e4393c;color: white;border: 2px solid #e4393c;">
                        </td>
                        <td></td>
                    </tr>
                </table>
            </form>
        </div>

    </div>

    <div class="dibu">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
</body>
<script>
    var span = document.querySelector('.top span')
    span.onclick = function () {
        location.href = '首页.html'

    }
    var form = document.querySelector('form');
    var username = document.querySelector('[name="username"]');
    var password = document.querySelector('[name="password"]');
    form.onsubmit = function () {
        if (username.value.trim() === '' || password.value.trim() === '') {
            alert('用户名和密码不能为空')

            return false
        }
        var xhr = new XMLHttpRequest;
        xhr.open('post', 'http://localhost:8888/users/login');
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        xhr.send(`username=${username.value}&password=${password.value}`)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                    var { message, code } = res
                    // console.log(res);
                    if (code === 1) {
                        alert(message)
                        function setCookie(key, value, seconds) {
                            var date = new Date()
                            date.setTime(date.getTime() + seconds * 1000 - 8 * 3600 * 1000)
                            document.cookie = key + '=' + value + ';expires=' + date
                        }
                        setCookie('username', username.value, 7200)
                        localStorage.setItem('token', res.token)
                        setCookie('userId', res.user.id, 3600)
                        location.href = "首页.html"
                    } else {
                        alert(message)
                    }
                }
            }
        }

        return false
    }
</script>

</html>